<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2024-05-24 14:15:41
-->
<script setup>
import { ref, watch, reactive, onMounted} from 'vue'
import $element from '@/utils/element.js'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  appendBody: {
    type: Boolean,
    default: false
  },
  width: {
    type: [String, Number],
    default: '600'
  },
  // 可通过 插槽自定义
  title: {
    type: String,
    default: 'dialog'
  },
  // 遮罩层
  modal: {
    type: Boolean,
    default: true
  },
  // 关闭按钮显示状态
  showClose: {
    type: Boolean,
    default: false
  },
  // 使对话框水平垂直居中
  alineCenter: {
    type: Boolean,
    default: true
  },
  // 内容居中
  center: {
    type: Boolean,
    default: false
  },
  // 关闭时销毁=== v-if
  destroyDialog: {
    type: Boolean,
    default: true
  },
  // 拖拽
  draggable: {
    type: Boolean,
    default: false
  },
  // 让拖拽范围超出可视区
  overflow: {
    type: Boolean,
    default: false
  },
  itemRow: {
    type: Object,
    default: () => {}
  },
  clickBlankToClose: {
    type: Boolean,
    default: false
  },
  formList:{
    type: Array,
    default: () => []
  }
})
const dialogVisible = ref(false)
const emit = defineEmits(['update:modelValue', 'updateTable'])

let form = reactive({
    src:'',
    poster:'',
    videoTitle:'',
    showLogo:false,
})

const ruleFormRef = ref(null)
const rules = reactive({
  src: [ { required: true, message: '请输入细节图地址', trigger: 'blur' }],
  poster: [{ required: true, message: '请输入热词名称', trigger: 'blur' }],
  videoTitle: [{ required: true, message: '请输入热词名称', trigger: 'blur' }],
})
onMounted(()=>{
    //  form = props.formList
})
// 提交
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (props.title === '新增') {
        emit('addChange', form)
      } else {
        emit('editChange', form)
      }
    }
  })
}

const imgStatus = ref(true)

// 图片加载成功
const successImg = (e) => {
  imgStatus.value = true
}

watch(
  () => props.itemRow,
  (val) => {
    form = props.itemRow
  },
  {
    deep: true
  }
)

watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val
  }
)
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :align-center="props.alineCenter"
    :draggable="props.draggable"
    :overflow="props.overflow"
    :show-close="props.showClose"
    :destroy-on-close="destroyDialog"
    :center="props.center"
    :modal="props.modal"
    :append-to-body="props.appendBody"
    :header="props.title"
    :width="props.width"
    :before-close="emit('update:modelValue', dialogVisible)"
    modal-class="dialog-class"
    class="dialog-style"
    :close-on-click-modal="props.clickBlankToClose"
  >
    <!-- 自定义头部 -->
    <template #header="{ titleId, titleClass }">
      <div class="flex flex-row justify-between gap-4">
        <h4 :id="titleId" :class="titleClass">{{ props.title }}</h4>
      </div>
    </template>

    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
    </template>

    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 600px"
      :rules="rules"
      ref="ruleFormRef"
    > 
      <el-form-item label="链接：" prop="src">
        <inputCom v-model="form.src" />
      </el-form-item>
      <el-form-item label="海报：" prop="poster">
        <inputCom v-model="form.poster" />
      </el-form-item>
      <el-form-item label="标题：" prop="videoTitle">
        <inputCom v-model="form.videoTitle" />
      </el-form-item>
      <el-form-item label="是否展示：">
        <el-switch v-model="form.showLogo" />
      </el-form-item>

        <!-- <template v-for="(item, index) in form" :key="index">
            <el-form-item :label="item.name" :prop="item">
             <inputCom v-model="form.name"  />
            </el-form-item>
        </template> -->

    </el-form>
  </el-dialog>
</template>

<style lang="less" scoped></style>
